<template>
  <div class="home-con">
    <el-form :model="formData.formConfig.form" :label-position="formData.formConfig.labelPosition"
      :size="formData.formConfig.size" :rules="rules" ref="form" label-width="100px" class="clearfix demo-form">
      <el-row class="row" :gutter="20">
        <draggable tag="div" class="draggable-box" v-bind="{
          group: 'form-draggable',
          ghostClass: 'moving',
          animation: 180,
          handle: '.drag-move',
          forceFallback: true
          // eslint-disable-next-line vue/no-mutating-props
        }" chosen-class="chosenClass" v-model="formData.formList" @start="onStart" @end="onEnd" @remove="onRemove"
          :move="onMove" @change="dragChange" :force-fallback="true">

          <transition-group tag="div" name="list" class="items-main">
            <el-col :offset="item.offset" :span="colSpan(item)" :class="{ 'drag-move': !!item.label }"
              v-for="(item) in formData.formList" :key="item.id">
              <div @click="selected(item)" class="list-group-item"
                :class="{ 'change-list-group-item': item.key === selectedSubassembly.key }">
                <el-form-item v-if="item.label && item.isLabel" :label="item.label" :prop="item.key">
                  <Node :form="formData.formConfig.form" :config="item"></Node>
                </el-form-item>
                <Node v-else :form="formData.formConfig.form" :config="item"></Node>

                <div class="list-group-item-operate-box" :style="item.type === 'table'? { height:0 } : ''">
                  <div class="list-group-item-operate">
                    <i class="icon el-icon-delete-solid" @click.stop="delList(item.key)"></i>
                  </div>
                </div>
              </div>
            </el-col>
          </transition-group>
        </draggable>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import Node from '@/components/Node'
export default {
  components: { draggable, Node },
  props: {
    formData: {
      type: Object,
      required: true
    },
    selectedSubassembly: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      form: {},
      rules: {}
    }
  },
  inject:
    ['setSelectedSubassembly']
  ,
  computed: {},
  created() {
    console.log(57, this.formData);
  },
  methods: {
    selected(item) {
      this.setSelectedSubassembly(item)
    },
    delList(key) {
      const formList = this.formData.formList.filter(item => item.key !== key)
      this.$emit('update:formData', { ...this.formData, formList })
      if (key === this.selectedSubassembly.key) {
        this.setSelectedSubassembly({})
      }
    },
    colSpan(item) {
      if (!item.offset) {
        return item.labelWidth || 24
      } else {
        return item.labelWidth || (24 - item.offset)
      }
    },
    dragChange(e) {
      // console.log('dragChange', e);
      const element = e.added?.element || e.moved?.element
      this.setSelectedSubassembly(element)
    },
    onStart(e) {
      console.log("开始拖拽", e);
    },
    onEnd(e) {
      console.log("结束拖拽", e);
    },
    onMove(e) {
      console.log(41, e);
    },
    onChooseComponent(element) {
      console.log(40, element);
    },
    onRemove(e) {
      console.log(43, '----------------------', e);
    }
  },
}
</script>

<style scoped lang="scss">
.demo-form {
  width: 100%;
  height: 100%;

  .el-row {
    transform: translateX(10px);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  .draggable-box {
    width: 100%;
    height: 100%;
  }

  .items-main {
    height: 100%;
    padding: 0 10px;
    background-color: #4ba0fc;
  }
}

.list-group-item {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 4px;
  margin-top: 10px;
  padding: 10px;
  overflow: hidden;

  &:hover {
    .list-group-item-operate {
      display: block;
    }
  }

  .list-group-item-operate-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1999;
  }

  .list-group-item-operate {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    color: #fff;
    background-color: #409EFF;
    border: 1px solid #409EFF;
    border-radius: 0 4px 4px 4px;
    padding: 2px;
  }

  .icon {
    cursor: pointer;
    margin: 6px;
  }
}

.change-list-group-item {
  background-color: #edf5ff;
  border: 1px solid #4ba0fc;
}

.chosenClass {
  // background-color: red;
}
</style>